<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container { /* 能设置在父container中的flex属性有以下六个*/
            display: flex; /* 设置flex-box，其子项目像流动的水一样自动紧挨在一排*/
            flex-direction: row;  /* 子项目排列的方向  */
            flex-wrap: nowrap;  /* 子项目换行的方式 */
            flex-flow: row wrap; /* flex-direction 和 flex-wrap 的简写 */
            justify-content: flex-start;  /* 子项目在横轴上的排列方式 */
            align-items: flex-start; /* 属性定义了一根横轴线子项目在竖轴上的排列方式  baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果子项目未设置高度或设为auto，将占满整个容器的高度。*/
            align-content: stretch; /* 属性定义了多根横轴线子项目在竖轴上的对齐方式。如果项目只有一根横轴线，该属性不起作用。 */
            /*请注意：根据flex-direction设置的不同  justify-content、align-items、align-content 控制的方向也会相应变化*/

            border: 1px solid #ddd;
            height: 300px;
            box-sizing: border-box;
        }
        .container > div {
            order: 0;
            /* 定义此项目的排列顺序。数值越小，排列越靠前，默认为0。 */
            flex-grow: 0;
            /* 定义项目的放大比例，默认为 0  表示即使父容器还有剩余空间，也不会放大去占用
               如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
               如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
            */
            flex-shrink: 1;
            /*  定义项目的缩小比例，默认为 1  表示如果父容器空间不足以存放全部的项目，将缩小项目的占用空间
                如果所有项目的flex-shrink 属性都为1，将等比例缩小项目的占用空间 。
                如果一个项目的 flex-shrink属性为2，其他项目都为1，则前者缩小项目的比例将比其他项多一倍。
                如果一个项目的 flex-shrink属性为0，那么将不能对其缩小
            */
            flex-basis: auto;
            /* 属性定义了在分配多余空间或压缩空间之前，项目占据的空间大小。
               如果设置了 flex-grow: 0， flex-shrink: 0，  flex-basis： 200px 那么该项目将固定占用200px的空间，不会被放大也不会被缩小。类似于width
               如果设置了 flex-grow: 1， flex-shrink: 0，  flex-basis： 200px 那么如果容器有多余空间时，该项目会被放大，放大之前固定有200px空间， 类似于minWidth，不会被缩小
               如果设置了 flex-grow: 0， flex-shrink: 1，  flex-basis： 200px 那么如果容器压缩空间时，该项目会被压缩， 压缩之前固定有200px空间，类似于maxWidth 不会被放大
               如果设置了 flex-grow: 1， flex-shrink: 1，  flex-basis： 200px 项目原本占据200px空间大小，但可能会被容器分配多余空间或压缩空间
               flex-basis： auto 项目跟随其他属性的设置动态变化大小，没有固定占用空间的值
               flex-basis: 0 将不考虑周围额外的空间，除非所有的项目都设置了flex-basis: 0；否则即使设置了flex-shrink: 0 依然会被压缩 （不常用）
            */
            flex:0 1 auto;
            /* 是 flex-grow、  flex-shrink、 flex-basis 合并的简写，默认值 0 1 auto ：表示不会被放大，但会被缩小，没有固定占用空间大小，空间自动。
               后两个属性值可选，可以写成 flex:1 ,flex: 2 ,表示有多余空间时多分其余项目的一倍或两倍，后两个属性值默认 1 auto，会被缩小，没有固定空间
               该属性有两个快捷值：auto (1 1 auto)：会放大和缩小  和 none (0 0 auto) ：不会被放大和缩小。都没有固定占用空间
               建议优先使用这个flex合并属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
            */
            align-self: auto;
            /* align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
               默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
            */

            width: 20%;
            background-color:#eee;
            border: 1px solid darkgray;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="font-size: 14px">1</div>
        <div style="font-size: 18px">2</div>
        <div style="font-size: 30px">3</div>
        <div style="font-size: 22px">4</div>
        <div style="font-size: 28px">5</div>
        <div style="font-size: 32px">6</div>
    </div>
</body>
</html>